<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 双大括号 可以理解为 js 表达式 -->
        {{ name }}
        <br>
        <!-- 如果通过双大括号，那么只能显示纯文本，无法解析 html 元素字符串 -->
        {{htmlStr}}



        <!-- 使用 v- 开头的属性，叫做指令 -->
        <!-- v-html，该指令是用来解析标签和样式用的，注意要确保内容的安全性 -->
        <div v-html="htmlStr"></div>

        <!-- v-text 是一个指令，该指令是用来渲染普通字符串的 -->
        <div v-text="htmlStr"></div>

        <!-- v-bind: 可以插入属性，因为在属性中无法使用 {{}} 所以要使用 v-bind: -->
        <h2 v-bind:title="title">锄禾日当午</h2>

        <!-- 使用 v-bind 插入 class -->
        <h2 v-bind:class="classname"> 带有 class 属性的 h2 </h2>

        <!-- : 冒号是 v-bind 的简写 -->
        <h2 :style="styleStr">带有样式的 h2</h2>

        <!-- 设置按钮 是否可以点击 -->
        <button :disabled="flag">按钮</button>

        <!-- 通过对象绑定多个属性 -->
        <div :="objectOfAttrs">
            你爱不爱你的工作，工作都会在那等你，不离不弃。
        </div>

        <h2>我们正在学习 {{text + num}}</h2>

        <h2>{{num + 1}}</h2>
        <h2 :class="classname + ' aaa'">{{age + 1}}</h2>


        <!-- if 条件成立时显示 -->
        <div v-if="flag">flag 为真</div>
        <!-- 判断中间不能有多余的标签 -->
        <!-- <span></span> -->
        <div v-else-if="flag == 123">flag 是 123</div>
        <div v-else>flag 为假</div>

        <!-- v-on 是用来监听事件用的 -->
        <button v-on:click="flag = !flag">切换 flag</button>


        <ul>
            <!-- 列表渲染，循环 -->
            <li v-for="(item,index) in list">{{index}}-{{item}}</li>
        </ul>


    </div>
</body>
<script>
    const { createApp } = Vue

    const app = createApp({
        data() {
            return {
                name: '张三',
                htmlStr: `<h1 style="color: red">
                        不是你喜欢的人不喜欢你，而是你，非要喜欢不喜欢你的人。
                    </h1>`,
                title: '一句古诗',
                classname: 'cell',
                styleStr: 'color: red',
                flag: true,
                objectOfAttrs: {
                    id: 'container',
                    class: 'wrapper',
                    style: 'color: red'
                },
                text: 'Vue',
                num: '3',
                age: 19,
                list: [
                    '摇一摇',
                    '晃一晃',
                    '扭一扭',
                    '舔一舔',
                    '泡一泡',
                    '奥利奥'
                ]
            }
        },
    })


    const vm = app.mount('#app')
</script>

</html>